<script setup lang="ts">
// import NBCase from "./components/12_综合案例.vue"
// import { ref } from "vue"
// const showCom = ref(true)
// import Parent from './components/父传子的父组件.vue'
// import HmHeader from './components/HmHeader.vue';
// import HmBody from './components/HmBody.vue';
// import HmFooter from './components/HmFooter.vue';
// import GrandFather from './components/跨代传值的爷爷.vue'
// import SlotCase from './components/匿名插槽和具名插槽.vue'
// import HmTable from './components/19_Vue3中封装table组件.vue'
// import { ref } from 'vue';
// type PersonColumnArr = Array<{ lable: string, field: string }>
// type PersonArr = Array<{ id: number, username: string, age: number }>
// const columns: PersonColumnArr = [
//   { lable: "序号", field: "id" },
//   { lable: "姓名", field: "username" },
//   { lable: "年龄", field: "age" },
//   { lable: "操作", field: "" },
// ]
// const data = ref<PersonArr>([
//   {
//     id: 1,
//     username: '张小华',
//     age: 18
//   },
//   {
//     id: 2,
//     username: '高大明',
//     age: 18
//   }, {
//     id: 3,
//     username: '刘德住',
//     age: 20
//   }
// ])
// const delrow = (row:{ id: number, username: string, age: number })=>{
//   data.value = data.value.filter(item => item.id !=row.id)
// }
</script>

<template>

  <!-- <HmHeader></HmHeader>
    <HmBody></HmBody>
    <HmFooter></HmFooter> -->
  <!-- <Parent></Parent> -->
  <!-- <GrandFather></GrandFather> -->
  <!-- <SlotCase>
      <template #header>
        <h1>头部内容</h1>
      </template>
<template #body>
        <h1>主体内容</h1>
      </template>
<template #footer>
        <h1>底部内容</h1>
      </template>
<template # default>
        默认插槽的传入
      </template>
</SlotCase> -->
  <!-- <HmTable :columns="columns" :data="data">

  </HmTable> -->
  <div class="container">

    <div class="nav">
      <router-link to="/home">去主页</router-link>
      <router-link to="/login">去登录</router-link>
    </div> 
    <router-view></router-view>
  </div>
  <div>
    
  </div>

</template>

<style scoped>
.container {
  width: 50%;
  height: 50vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: pink;
}

.nav a {
  margin-left: 10px;
  text-decoration: none;
}

.router-link-active {
  font-size: 30px;
}
</style>
